<template>
  <!-- 巨能降车源详情 -->
  <page-loading :show="showPage" mode='if'>
  <view class="container">
    <u-toast ref="uToast" />
    <view class="lunbo">
      <view class="wrap">
        <u-swiper mode='number' indicator-pos="bottomLeft" interval='4000' bg-color="#fff" height='500' :list="bannar"
          @click="bigimgList"></u-swiper>
      </view>
    </view>
    <view class="colorcss flex">
      <view class="colorbg flex flex-ac-c flex-ai-c flex-jc-sb" @click="colorClick">
        <view class="white" :style="{background:item.outerColour.colorCoding}" v-for="(item, index) in xedColorList.slice(0,2)"
          :key="index"></view>
        <view class="">
          {{xedColorList.length}}种配色
        </view>
        <view class="">
          <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
        </view>
      </view>
     <view class="lookpz" @click="lookpeiclick">
        <view class="">
          查看配置
        </view>
      </view>
    </view>
    <view class="titles">
      {{carllist.car_Type_Name}} {{carllist.configuration_Name}}
    </view>
    <view class="states flex flex-jc-sb">
      <view class="selfss flex">
        <view class="self-support" v-show="stiplist.isgovers">
          自营
        </view>
        <view class="nengjiang" v-show="!carllist.rent_Out && !carllist.down_Payment">
          巨能降
        </view>
      </view>
      <view class="Manufacturice flex flex-jc-sb flex-ai-fe">
        <view class="">
          厂家指导价：
        </view>
        <view class="">
          <text>{{carllist.factory_Prices}}</text>
        </view>
        <view class="lvse ml-10">
          <u-icon name="arrow-downward" color="#38AA0B" size="24rpx"></u-icon>
          {{carllist.difference}}
        </view>
      </view>
    </view>
    <view class="zhidaoj flex flex-jc-sb flex-ai-fe">
      <view class="stock">
        剩余库存：{{carllist.inventory}}辆
      </view>
      <view class="yishou">
        裸车价 <text>{{carllist.client_Price}}</text>
      </view>
    </view>
    <view v-show="stowUnfold">
      <view class="modelSelection flex flex-ai-c">
        <view class="choice">
          车型选择
        </view>
        <view class="parameter">
          {{carllist.car_Type_Name}} {{carllist.configuration_Name}}
        </view>
      </view>
      <view class="modelSelection flex flex-ai-c">
        <view class="choice">
          当前门店
        </view>
        <view class="parameter">
          {{stiplist.store_Name}}
        </view>
      </view>
      <view class="modelSelection flex flex-ai-c">
        <view class="choice">
          活动截止
        </view>
        <view class="parameter">
          {{carllist.valid_Time}}
        </view>
      </view>
      <view class="modelSelection flex flex-ai-c">
        <view class="choice">
          限制条件
        </view>
        <view class="parameter" v-if="carllist.conditions">
          {{carllist.conditions}}
        </view>
        <view class="parameter" v-else>
          暂无
        </view>
      </view>
    </view>
    <view class="clickCollapse" v-show="stowUnfold" @click="shtfclick">
      <u-icon name="arrow-right-double" color="#9A9A9A" size="24rpx" class="iconssq"></u-icon>
      点击收起
    </view>
    <view class="clickCollapse" v-show="!stowUnfold" @click="shtfclick">
      <u-icon name="arrow-right-double" color="#9A9A9A" size="24rpx" class="iconszk"></u-icon>
      点击展开
    </view>
    <u-gap height="24" bg-color="#F6F6F6"></u-gap>
    <view class="openapp flex flex-ai-c flex-jc-c" v-if="topback">
      <view class="flex flex-ai-c flex-jc-c">
        <view v-if="Invitationcode">
          好友推荐码：<text class="yaoqingma">{{Invitationcode}}</text>
        </view>
        <view class="copycss" :data-clipboard-text="Invitationcode" v-if="Invitationcode">
          复制
        </view>
        <view class="">
          内含超值福利~
        </view>
        <view class="auopenapp" id="openapps">
          <i-icon icon="iconLOGO" type="single" size="26rpx" color="#3D3D3D" style="margin-right: 10rpx;"></i-icon>
          打开APP
        </view>
      </view>
    </view>
    <!-- 方案 -->
    <giantnengjiangDetailsZj :carid="carid" :xedColorList="xedColorList" :carllist="carllist" @title="fun"></giantnengjiangDetailsZj>

    <!-- 颜色弹框-->
    <u-popup v-model="colorpopup" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 486rpx;">
        <view class="hgztitle flex">
          <view class="toubus">
            <view class="titname">共{{xedColorList.length}}种配色</view>
            <view class="cankao">
              *配色示意仅供参考，最终颜色以实际车辆为准
            </view>
          </view>
          <view class="iconcss" @tap="colorpopup = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view class="kuang1 flex flex-jc-c" v-for="(item, index) in xedColorList" :key="index">
          <view class="kuang2">
            <view class="colorboxs">
              <view class="white" :style="{background:item.outerColour.colorCoding}"></view>
              <view class="kuangtext">
                外观 {{item.outerColour.color}}
              </view>
            </view>
            +
            <view class="colorboxs">
              <view class="kuangtext">
                内饰 {{item.inColour.color}}
              </view>
              <view class="kuang21" v-if="item.inColour.neiColor.length == 1">
                <view class="white1" :style="{background:item.inColour.neiColor[0]}"></view>
              </view>
              <view class="kuangdoubu" v-if="item.inColour.neiColor.length == 2">
                <view class="white4" style="border-radius: 10rpx 10rpx 0rpx 0rpx;" :style="{background:item.inColour.neiColor[0]}"></view>
                <view class="white4" style="border-radius: 0rpx 0rpx 10rpx 10rpx;" :style="{background:item.inColour.neiColor[1]}"></view>
              </view>
            </view>
          </view>
          <view class="deletebox" @click="tagClick(item,index)">
            <i-icon icon="iconquxiaoxunjia" type="single" size="32rpx" color="#e1e1e1"></i-icon>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 弹窗 -->
    <view class="uni-popup" :class="success? 'barshow' : 'bars'">
      <view class="triangle"></view>
      <view class="main">
        <!-- #ifdef APP-PLUS -->
        <view class="heades flex flex-ai-c flex-jc-c" @click="xqshare()">
          <view class="manicon">
            <i-icon icon="iconfenxiang" type="single" size="38rpx" color="#FFFFFF"></i-icon>
          </view>
          <view class="1234">
            分享
          </view>
        </view>
        <!-- #endif -->
        <view class="heades" @click="comparison()">
          询比价再购
        </view>
        <view class="heades" @click="Calculation()">
          免费贷款测算
        </view>
        <view class="headesn" @click="stortClick(stiplist)">
          进入店铺
        </view>
      </view>
    </view>
    <!-- 分享弹窗选项 -->
    <share v-model="sharePopupShow" @change="handleShare"></share>
  </view>
  </page-loading>
</template>

<script src="./giantnengjiangDetails.js"></script>
<style scoped lang="scss">
  @import './giantnengjiangDetails.scss';
</style>
